<template>
  <div class="pre-claim-page">
    <!-- 页面标题 -->
    <el-page-header @back="handleBack" content="保单查询与预赔申请" class="page-header" />

    <!-- 1. 保单编号查询区域 -->
    <el-card class="search-card" shadow="hover">
      <el-row :gutter="20" align="middle">
        <el-col :span="20">
          <el-input v-model="policyId" placeholder="请输入保单编号（如：POL202509001）" clearable @keyup.enter="handleSearch"
                    :disabled="loading" class="search-input" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search" block>
            查询
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 2. 数据展示区域（上下排列下拉表单） -->
    <div class="data-card-container">
      <!-- 2.1 投保单信息表单（下拉框形式 - 上方） -->
      <el-card class="data-card" shadow="hover" :body-style="{ padding: '0' }" style="margin-bottom: 20px">
        <!-- 下拉框标题栏 -->
        <div class="collapse-header" @click="toggleCollapse('insure')">
          <span>投保单信息（保单编号：{{ insureOrder.policyId || '未查询' }}）</span>
          <el-icon :class="insureCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">
            <ArrowDown v-if="insureCollapsed" />
            <ArrowUp v-else />
          </el-icon>
        </div>

        <!-- 表单内容（可折叠） -->
        <div class="collapse-content" v-show="!insureCollapsed" :style="{ maxHeight: insureCollapsed ? '0' : '1000px' }">
          <el-form :model="insureOrder" label-width="180px" class="detail-form" size="small">
            <!-- 投保单字段 - 分2列布局 -->
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="关联投保人ID">
                  <el-input v-model="insureOrder.insuredId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="险种名称">
                  <el-input v-model="insureOrder.insuranceCoverageName" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="投保项目（作物/动物）">
                  <el-input v-model="insureOrder.insuranceSubject" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="承保面积（亩，仅种植业）">
                  <el-input :value="insureOrder.coverageArea ? `${insureOrder.coverageArea} 亩` : '无'" disabled
                            class="form-input" />
                </el-form-item>
                <el-form-item label="承保数量（头/只，仅养殖业）">
                  <el-input :value="insureOrder.coverageQuantity ? `${insureOrder.coverageQuantity} 头/只` : '无'" disabled
                            class="form-input" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位保额（元）">
                  <el-input v-model="insureOrder.unitInsured" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="总保额（元）">
                  <el-input v-model="insureOrder.sumInsured" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="保费（元）">
                  <el-input v-model="insureOrder.totalPremium" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="保险起期">
                  <el-input v-model="insureOrder.startDate" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="保险止期">
                  <el-input v-model="insureOrder.endDate" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="缴费状态">
                  <el-input :value="getPayStatusText(insureOrder.payStatus)" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="保单状态">
                  <el-input :value="getPolicyStatusText(insureOrder.policyStatus)" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="投保业务员">
                  <el-input v-model="insureOrder.insureUser" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="投保时间">
                  <el-input :value="formatDateTime(insureOrder.createTime)" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="缴费时间">
                  <el-input :value="formatDateTime(insureOrder.payTime)" disabled class="form-input" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 2.2 立案信息表单（下拉框形式 - 下方） -->
      <el-card class="data-card" shadow="hover" :body-style="{ padding: '0' }">
        <!-- 下拉框标题栏 -->
        <div class="collapse-header" @click="toggleCollapse('claim')">
          <span>立案信息（关联保单：{{ claimReg.policyId || '未查询' }}）</span>
          <el-icon :class="claimCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">
            <ArrowDown v-if="claimCollapsed" />
            <ArrowUp v-else />
          </el-icon>
        </div>

        <!-- 表单内容（可折叠） -->
        <div class="collapse-content" v-show="!claimCollapsed" :style="{ maxHeight: claimCollapsed ? '0' : '1000px' }">
          <el-form :model="claimReg" label-width="180px" class="detail-form" size="small">
            <!-- 立案字段 - 分2列布局 -->
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="立案唯一ID">
                  <el-input v-model="claimReg.registrationId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="关联报案ID">
                  <el-input v-model="claimReg.reportId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="关联查勘ID">
                  <el-input v-model="claimReg.surveyId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="关联投保人ID">
                  <el-input v-model="claimReg.insuredId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="立案时间">
                  <el-input :value="formatDateTime(claimReg.registrationTime)" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="立案员工号">
                  <el-input v-model="claimReg.registrarId" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="撤销原因">
                  <el-input :value="claimReg.cancelReason || '无'" disabled class="form-input" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="农户自报预估损失（元）">
                  <el-input v-model="claimReg.farmerLossEstimate" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="立案员评估损失（元）">
                  <el-input v-model="claimReg.surveyorLossEstimate" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="损失差异原因">
                  <el-input :value="claimReg.lossDiffReason || '无'" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="损失类型">
                  <el-input
                      :value="isNaN(Number(claimReg.lossType)) ? claimReg.lossType : (lossTypeMap[claimReg.lossType] || '未知')"
                      disabled class="form-input" />
                </el-form-item>
                <el-form-item label="损失范围">
                  <el-input v-model="claimReg.lossScope" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="是否属于保险责任">
                  <el-input :value="claimReg.isCovered === 1 ? '是' : '否'" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="责任认定依据">
                  <el-input v-model="claimReg.coverageBasis" disabled class="form-input" />
                </el-form-item>
                <el-form-item label="立案状态">
                  <el-input :value="regStatusMap[claimReg.registrationStatus] || '未知'" disabled class="form-input" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>

    <!-- 3. 预赔申请表单 -->
    <el-card class="pre-claim-card" shadow="hover" header="预赔申请表单"
             v-if="insureOrder.policyId && claimReg.registrationId" style="margin-top: 20px">
      <el-form :model="preClaimForm" :rules="preClaimRules" ref="preClaimRef" label-width="180px" class="pre-claim-form"
               size="small">
        <!-- 自动填充字段（不可编辑）- 分2列布局 -->
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="关联立案ID" prop="registrationId">
              <el-input v-model="preClaimForm.registrationId" disabled class="form-input" />
            </el-form-item>
            <el-form-item label="保单编号" prop="policyId">
              <el-input v-model="preClaimForm.policyId" disabled class="form-input" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联投保人ID" prop="insuredId">
              <el-input v-model="preClaimForm.insuredId" disabled class="form-input" />
            </el-form-item>
            <el-form-item label="关联报案ID" prop="reportId">
              <el-input v-model="preClaimForm.reportId" disabled class="form-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="农户理想赔付金额（元）" prop="farmerExpectedAmount">
          <el-input v-model="preClaimForm.farmerExpectedAmount" type="number" step="0.01" min="0.01"
                    placeholder="请输入大于0的金额" class="form-input full-width-input" />
        </el-form-item>
        <el-form-item label="申请理由" prop="applyReason">
          <el-input v-model="preClaimForm.applyReason" type="textarea" rows="3"
                    placeholder="请说明申请预赔的理由（如：损失严重影响生计，希望尽快获得赔付）" class="full-width-input" />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item class="submit-btn-group">
          <el-button type="primary" @click="handlePreClaimSubmit" :loading="submitLoading" icon="el-icon-check">
            保存预赔申请
          </el-button>
          <el-button @click="handleResetPreClaim" icon="el-icon-refresh-right" style="margin-left: 10px">
            重置表单
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 无数据提示 -->
    <el-empty description="请输入保单编号并点击查询获取数据" class="empty-tip"
              v-if="!insureOrder.policyId || !claimReg.registrationId" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, unref } from 'vue';
import { ElMessage, ElEmpty, ElMessageBox } from 'element-plus';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import axios from 'axios';
import hxxp from "@/utils/hxxp";

// 全局路由对象
const { proxy } = getCurrentInstance();

// 下拉框折叠状态管理
const insureCollapsed = ref(true);  // 投保单表单折叠状态（默认折叠）
const claimCollapsed = ref(true);   // 立案信息表单折叠状态（默认折叠）

// 1. 基础状态管理
const policyId = ref(''); // 输入的保单编号
const loading = ref(false); // 查询加载状态
const submitLoading = ref(false); // 提交加载状态
const preClaimRef = ref(null); // 预赔表单ref

// 2. 数据存储（初始值匹配后端返回格式）
// 2.1 投保单数据
const insureOrder = reactive({
  orderId: '',
  policyId: '',
  insuredId: '',
  insuranceCoverageName: '',
  insuranceSubject: '',
  coverageArea: null,
  coverageQuantity: null,
  unitInsured: '',
  sumInsured: '',
  totalPremium: '',
  startDate: '',
  endDate: '',
  payStatus: null, // 缴费状态（数字类型）
  policyStatus: null, // 保单状态（数字类型）
  insureUser: '',
  createTime: '',
  payTime: '' // 确保包含缴费时间字段
});

// 2.2 立案数据
const claimReg = reactive({
  registrationId: '',
  reportId: '',
  surveyId: '',
  policyId: '',
  insuredId: '',
  registrationTime: '',
  registrarId: '',
  farmerLossEstimate: '',
  surveyorLossEstimate: '',
  lossDiffReason: '',
  lossType: '',
  lossScope: '',
  isCovered: '',
  coverageBasis: '',
  registrationStatus: '',
  cancelReason: '' // 确保包含撤销原因字段
});

// 2.3 预赔申请表单
const preClaimForm = reactive({
  registrationId: '', // 自动填充：立案ID
  policyId: '', // 自动填充：保单编号
  insuredId: '', // 自动填充：投保人ID
  reportId: '', // 自动填充：报案ID
  farmerExpectedAmount: '', // 手动输入：理想金额
  applyReason: '' // 手动输入：申请理由
});

// 3. 字典映射（匹配数据库枚举值）
// 3.1 缴费状态映射
const payStatusMap = {
  1: '待缴费',
  2: '缴费中',
  3: '缴费成功',
  4: '缴费失败'
};

// 3.2 保单状态映射
const policyStatusMap = {
  1: '待生效',
  2: '已生效',
  3: '已退保',
  4: '已过期'
};

// 3.3 损失类型映射
const lossTypeMap = {
  1: '部分损失',
  2: '全部损失',
  3: '死亡损失',
  4: '其他损失'
};

// 3.4 立案状态映射
const regStatusMap = {
  1: '已立案',
  2: '已理算',
  3: '已撤销'
};

// 4. 状态转换方法
// 转换缴费状态为文字描述
const getPayStatusText = (status) => {
  // 处理可能的字符串类型状态值（转为数字）
  const numStatus = typeof status === 'string' ? parseInt(status, 10) : status;

  // 检查是否为有效状态值
  if (numStatus !== null && numStatus !== undefined && !isNaN(numStatus)) {
    return payStatusMap[numStatus] || `未知状态(${numStatus})`;
  }
  return '未设置';
};

// 转换保单状态为文字描述
const getPolicyStatusText = (status) => {
  // 处理可能的字符串类型状态值（转为数字）
  const numStatus = typeof status === 'string' ? parseInt(status, 10) : status;

  // 检查是否为有效状态值
  if (numStatus !== null && numStatus !== undefined && !isNaN(numStatus)) {
    return policyStatusMap[numStatus] || `未知状态(${numStatus})`;
  }
  return '未设置';
};


// 6. 预赔表单校验规则
const preClaimRules = reactive({
  registrationId: [
    { required: true, message: '关联立案ID不能为空', trigger: 'blur' }
  ],
  policyId: [
    { required: true, message: '保单编号不能为空', trigger: 'blur' }
  ],
  insuredId: [
    { required: true, message: '关联投保人ID不能为空', trigger: 'blur' }
  ],
  reportId: [
    { required: true, message: '关联报案ID不能为空', trigger: 'blur' }
  ],
  farmerExpectedAmount: [
    { required: true, message: '请输入农户理想赔付金额', trigger: 'blur' },
    { min: 0.01, message: '金额必须大于0', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '金额最多保留2位小数', trigger: 'blur' }
  ],
  applyReason: [
    { required: true, message: '请填写申请理由', trigger: 'blur' },
    { min: 10, message: '申请理由至少10个字符', trigger: 'blur' }
  ]
});

// 7. 工具函数：日期格式化
const formatDateTime = (dateValue) => {
  if (!dateValue) return '无';
  // 处理ISO格式（如：2025-09-17T10:35:22）
  const normalizedStr = String(dateValue).replace('T', ' ').split('.')[0];
  const date = new Date(normalizedStr);
  return isNaN(date.getTime()) ? '无效时间' : normalizedStr;
};

// 8. 下拉框折叠控制
const toggleCollapse = (type) => {
  if (type === 'insure') {
    insureCollapsed.value = !insureCollapsed.value;
  } else if (type === 'claim') {
    claimCollapsed.value = !claimCollapsed.value;
  }
};

// 9. 核心业务逻辑 - 保单查询
const handleSearch = async () => {
  const inputPolicyId = policyId.value.trim();
  if (!inputPolicyId) {
    ElMessage.warning('请输入保单编号后再查询');
    return;
  }

  loading.value = true;
  try {
    // 1. 投保单查询：参数名 policyId（小写p）
    const insureRes = await hxxp.get('/aiInsureOrder/getOrder', {
      params: { policyId: inputPolicyId }
    });

    // 2. 立案信息查询：参数名 PolicyId（大写P）
    const claimRes = await hxxp.get('/aiClaimRegistration/selectByPolicyId', {
      params: { PolicyId: inputPolicyId }
    });

    console.log(insureRes)
    console.log(claimRes)

    // 处理投保单数据 - 修复：确保正确获取data对象
    if (insureRes) {
      // 有些接口可能将数据放在data.data中
      const insureData =  insureRes;
      console.log('投保单数据:', insureData);

      // 清空之前的数据
      Object.keys(insureOrder).forEach(key => {
        if (typeof insureOrder[key] === 'string') {
          insureOrder[key] = '';
        } else {
          insureOrder[key] = null;
        }
      });

      // 填充新数据
      Object.assign(insureOrder, insureData);

      // 确保状态值为数字类型（防止后端返回字符串）
      insureOrder.payStatus = parseInt(insureData.payStatus, 10) || null;
      insureOrder.policyStatus = parseInt(insureData.policyStatus, 10) || null;

      // 确保数值字段正确显示
      if (insureData.coverageArea !== null && insureData.coverageArea !== undefined) {
        insureOrder.coverageArea = Number(insureData.coverageArea);
      }
      if (insureData.coverageQuantity !== null && insureData.coverageQuantity !== undefined) {
        insureOrder.coverageQuantity = Number(insureData.coverageQuantity);
      }

      insureCollapsed.value = false;
      ElMessage.success('投保单信息查询成功');
    } else {
      ElMessage.warning('未查询到投保单信息');
      Object.keys(insureOrder).forEach(key => {
        if (typeof insureOrder[key] === 'string') {
          insureOrder[key] = '';
        } else {
          insureOrder[key] = null;
        }
      });
    }

    // 处理立案数据 - 修复：正确解析嵌套的data对象
    if (claimRes && claimRes.code === 100200 && claimRes.data) {
      console.log('立案数据:', claimRes.data);

      // 清空之前的数据
      Object.keys(claimReg).forEach(key => {
        if (typeof claimReg[key] === 'string') {
          claimReg[key] = '';
        } else {
          claimReg[key] = null;
        }
      });

      // 填充新数据
      Object.assign(claimReg, claimRes.data);

      // 确保数值字段正确显示
      if (claimRes.data.farmerLossEstimate !== null && claimRes.data.farmerLossEstimate !== undefined) {
        claimReg.farmerLossEstimate = Number(claimRes.data.farmerLossEstimate);
      }
      if (claimRes.data.surveyorLossEstimate !== null && claimRes.data.surveyorLossEstimate !== undefined) {
        claimReg.surveyorLossEstimate = Number(claimRes.data.surveyorLossEstimate);
      }

      // 确保状态值为数字类型
      claimReg.isCovered = parseInt(claimRes.data.isCovered, 10) || 0;
      claimReg.registrationStatus = parseInt(claimRes.data.registrationStatus, 10) || null;
      claimReg.lossType = parseInt(claimRes.data.lossType, 10) || null;

      claimCollapsed.value = false;

      // 自动填充预赔表单的基础字段
      preClaimForm.registrationId = claimRes.data.registrationId;
      preClaimForm.policyId = claimRes.data.policyId;
      preClaimForm.insuredId = claimRes.data.insuredId;
      preClaimForm.reportId = claimRes.data.reportId;

      ElMessage.success('立案信息查询成功');
    } else {
      ElMessage.warning('未查询到立案信息');
      Object.keys(claimReg).forEach(key => {
        if (typeof claimReg[key] === 'string') {
          claimReg[key] = '';
        } else {
          claimReg[key] = null;
        }
      });
      ['registrationId', 'policyId', 'insuredId', 'reportId'].forEach(key => {
        preClaimForm[key] = '';
      });
    }
  } catch (error) {
    console.error('查询接口异常：', error);
    ElMessage.error('网络异常，查询失败，请稍后重试');
    // 异常时清空数据
    Object.keys(insureOrder).forEach(key => {
      if (typeof insureOrder[key] === 'string') {
        insureOrder[key] = '';
      } else {
        insureOrder[key] = null;
      }
    });
    Object.keys(claimReg).forEach(key => {
      if (typeof claimReg[key] === 'string') {
        claimReg[key] = '';
      } else {
        claimReg[key] = null;
      }
    });
    ['registrationId', 'policyId', 'insuredId', 'reportId'].forEach(key => {
      preClaimForm[key] = '';
    });
  } finally {
    loading.value = false;
  }
};

// 10. 预赔申请提交
const handlePreClaimSubmit = async () => {
  const formRef = unref(preClaimRef);
  if (!formRef) return;

  try {
    // 表单校验
    await formRef.validate();

    // 二次确认
    await ElMessageBox.confirm(
        '确认提交预赔申请？提交后将无法修改基础信息',
        '提交确认',
        {
          confirmButtonText: '确认提交',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );

    submitLoading.value = true;
    // 构造提交数据
    const submitData = {
      ...preClaimForm,
      farmerExpectedAmount: Number(preClaimForm.farmerExpectedAmount),
      preClaimStatus: 1, // 默认为"待审核"状态
      reviewerId: null,
      reviewTime: null,
      reviewResult: null,
      approvedAmount: null,
      reviewOpinion: null
    };

    // 发送提交请求
    const response = await hxxp.post(
        '/aiPreClaim/add',
        submitData
    );

    if (response.code === 100200) {
      ElMessage.success('预赔申请提交成功！');
      handleResetPreClaim();
    } else {
      ElMessage.error(`提交失败：${response.msg || '未知错误'}`);
    }
  } catch (error) {
    if (error.name === 'Error') {
      console.error('预赔提交异常：', error);
      ElMessage.error('网络异常，提交失败，请稍后重试');
    }
  } finally {
    submitLoading.value = false;
  }
};

// 11. 预赔表单重置
const handleResetPreClaim = () => {
  const formRef = unref(preClaimRef);
  if (formRef) {
    formRef.resetFields();
    // 重置后保留自动填充的基础字段
    preClaimForm.registrationId = claimReg.registrationId || '';
    preClaimForm.policyId = claimReg.policyId || '';
    preClaimForm.insuredId = claimReg.insuredId || '';
    preClaimForm.reportId = claimReg.reportId || '';
    // 重置为当前时间
    preClaimForm.farmerApplyTime = new Date()
        .toISOString()
        .replace('T', ' ')
        .slice(0, 19);
  }
};

// 12. 返回上一页
const handleBack = () => {
  if (proxy?.$router) {
    proxy.$router.back();
  } else {
    window.history.back();
  }
};

// 页面加载时初始化
onMounted(() => {
  // 可默认填充测试保单号
  // policyId.value = 'POL202509001';
});
</script>

<style scoped>
.pre-claim-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
  max-width: 1400px;
  /* 限制最大宽度，避免在超大屏幕上过于宽松 */
  margin: 0 auto;
  /* 居中显示 */
}

.page-header {
  margin-bottom: 24px;
}

.search-card {
  margin-bottom: 24px;
  padding: 16px;
}

.search-input {
  max-width: 500px;
  /* 限制搜索框最大宽度 */
}

.data-card-container {
  margin-bottom: 24px;
}

.data-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border-radius: 6px;
  /* 圆角处理 */
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
  background-color: #f9fafb;
}

.collapse-header:hover {
  background-color: #f0f2f5;
}

.collapse-content {
  padding: 20px;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.3s;
}

.detail-form {
  width: 100%;
}

.detail-form .el-form-item {
  margin-bottom: 16px;
}

/* 核心：限制输入框宽度 */
.form-input {
  width: 300px !important;
  /* 调整为合适的宽度 */
  max-width: 100%;
  /* 确保在小容器中不会溢出 */
}

/* 特殊字段需要全屏宽度 */
.full-width-input {
  width: 100% !important;
  max-width: 600px;
  /* 限制最大宽度 */
}

.pre-claim-card {
  padding: 20px;
  margin-bottom: 24px;
  border-radius: 6px;
}

.pre-claim-form .el-form-item {
  margin-bottom: 20px;
}

.submit-btn-group {
  margin-top: 10px;
  text-align: right;
}

.empty-tip {
  margin: 60px 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .form-input {
    width: 250px !important;
  }
}

@media (max-width: 992px) {
  .form-input {
    width: 200px !important;
  }

  .detail-form,
  .pre-claim-form {
    label-width: 150px !important;
  }
}

@media (max-width: 768px) {
  .pre-claim-page {
    padding: 10px;
  }

  .search-card .el-col {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 12px;
  }

  .collapse-header {
    padding: 12px 16px;
    font-size: 14px;
  }

  .collapse-content {
    padding: 16px;
  }

  .detail-form,
  .pre-claim-form {
    label-width: 120px !important;
  }

  .detail-form .el-row .el-col {
    flex: 0 0 100%;
    width: 100%;
  }

  .detail-form .el-form-item {
    margin-bottom: 12px;
  }

  /* 小屏幕下输入框宽度自适应 */
  .form-input {
    width: 100% !important;
  }
}
</style>
